<template>
	<view>
		<view class="main">
			<image mode="aspectFill" class="img" :src="imagesMeetingUrl + 'home.jpg'" />
			<view class="list">
				<uni-row :gutter="20">
					<uni-col :span="12" v-for="(item, index) in menuList" :key="index">
						<view class="inner" @click="handleToPage(item.path)">
							<image :src="imagesMeetingUrl + item.imagesUrl"></image>
							<text>{{item.title}}</text>
						</view>
					</uni-col>
				</uni-row>
			</view>
		</view>

		<tabbar />
	</view>
</template>

<script>
	import config from '@/configs/index.js'

	export default {
		data() {
			return {
				imagesMeetingUrl: config.IMAGES_URL_YQGJ + 'meeting/',

				menuList: [{
						title: "公告通知",
						imagesUrl: '1.png',
						path: "/sub-meeting/news_index"
					},
					{
						title: "预定会议室",
						imagesUrl: '2.png',
						path: "/sub-meeting/enroll_index"
					},
					{
						title: "会议日历",
						imagesUrl: '3.png',
						path: "/sub-meeting/enroll_calendar"
					},
					{
						title: "我的预定",
						imagesUrl: '4.png',
						path: "/sub-meeting/enroll_my_join_list"
					},
				]
			}
		},
		methods: {
			handleToPage(path) {
				uni.navigateTo({
					url: path
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.main {
		width: 100%;
		padding: 0;
	}

	.main .img {
		width: 100%;
		height: 500rpx;

	}

	.main .list {
		position: relative;
		margin-top: -50rpx;
		background-color: #fff;
		padding: 30rpx 30rpx 0 30rpx;
		border-top-right-radius: 40rpx;
		border-top-left-radius: 40rpx;
	}


	.main .inner {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #F0F2FE;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		height: 250rpx;
		box-sizing: border-box;

		image {
			width: 100rpx;
			height: 100rpx
		}

		text {
			margin-top: 20rpx;
			font-size: 30rpx;
			color: #000;
			font-weight: bold;
		}
	}
</style>